<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <div id="fade-obj" style="width:300px;height:300px;background:#000;opacity:1;"></div>
  <input type="button" id="fade-btn" value="淡出">
<script>
  var obj = document.getElementById("fade-obj");
  var btn = document.getElementById("fade-btn");
  var t;
  btn.onclick = function(){
    btn.style.disabled = true;
    if(btn.value === "淡出"){
      t = setInterval(changeOpacity1,100);
      var s1 = setTimeout(changeContentAndAbled1,1000);
    }else{
      t = setInterval(changeOpacity2,100);
      var s2 = setTimeout(changeContentAndAbled2,1000);
    }
  }
  function changeOpacity1(){
    if(obj.style.opacity == 0){
      return;
    }
    obj.style.opacity -= 0.1;
    console.log(obj.style.opacity);
    btn.disabled = "disabled";
  }
  var temp = 0;
  function changeOpacity2(){
    if(obj.style.opacity == 1){
      return;
    }
    temp += 0.1;
    obj.style.opacity = temp;
    console.log(obj.style.opacity);
    btn.disabled = "disabled";
  }
  function changeContentAndAbled1(){
    btn.value = "淡入";
    btn.disabled = false;
    clearInterval(t);
  }
  function changeContentAndAbled2(){
    temp = 0;
    btn.value = "淡出";
    btn.disabled = false;
    clearInterval(t);
  }
</script>
</body>
</html>